<template>
  <div>
    <router-view />
    <div class="course-detail" v-if="!flag">
      <LabelSelect />
      <CourseMain />
      <div class="webheart scolltop" style="min-height: 600px">
        <el-row :gutter="30">
          <el-col :span="6">
            <ChapterList v-if="$route.meta.type == 1" />
            <ClassifyList v-if="$route.meta.type != 1" />
          </el-col>
          <el-col :span="18">
            <KnowledgeList />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { removeSession } from '@/utils/session'
export default {
  components: {
    LabelSelect: () =>
      import('@/views/Home/specialtyLibrary/components/LabelSelect.vue'),
    CourseMain: () => import('./CourseMain.vue'),
    ChapterList: () => import('./ChapterList.vue'),
    ClassifyList: () => import('./ClassifyList.vue'),
    KnowledgeList: () => import('./KnowledgeList.vue'),
  },
  data() {
    return {
      flag: true,
    }
  },
  watch: {
    $route() {
      this.flag = this.$route.name.includes('knowdedge')
    },
  },
  mounted() {
    this.flag = this.$route.name.includes('knowdedge')
    this.openFullScreen1()
  },
  methods: {
    openFullScreen1() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.9)',
      })
      setTimeout(() => {
        // document.body.scrollTop = document.documentElement.scrollTop = 0;
        loading.close()
      }, 300)
    },
  },
  beforeDestroy() {
    removeSession('curChaper')
  },
}
</script>
<style scoped>
.course-detail {
  margin-bottom: 30px;
}
</style>